import React, { useEffect, useCallback, useRef, useState } from 'react';
import './index.css';
import p21Png from './img/p2-1.png';
import p22Png from './img/p2-2.png';
import heroVehicelRoofDesktopJpg from './img/hero-vehicel-roof-desktop.jpg';
import heroVehicleSideviewDesktopJpg from './img/hero-vehicle-sideview-desktop.jpg';
import heroBackgroundDesktopJpg from './img/hero-background-desktop.jpg';
import heroVehicelRoofMobileJpg from './img/hero-vehicel-roof-mobile.jpg';
import Winds from './winds';
/**
 * @这是全屏滚动的东西，在这里无法访问
 *
 *
 * */
function Index() {
  const [page1Top, setPage1Top] = useState(0);
  const [clientHeight, setClientHeight] = useState(0);
  const page1Ref = useRef(null);
  const page2Ref = useRef(null);

  const windsRef = useRef(null);

  const setStyleByDom = useCallback((selectors, style) => {
    for (let i in style) {
      document.querySelector(selectors).style[i] = style[i];
    }
  }, []);
  const setStyleByDoms = useCallback(obj => {
    for (let i in obj) {
      for (let j in obj[i]) document.querySelector(i).style[j] = obj[i][j];
    }
  }, []);
  const onScroll = useCallback(
    e => {
      // 页面高度
      // const clientHeight = 757;// 临时写的
      // 滚动条高度
      const scrollTop = document.documentElement.scrollTop;
      /**
       * @固定页面
       * */
      if (scrollTop <= clientHeight * 3) {
        console.log(scrollTop, clientHeight * 3);
        page1Ref.current.style.position = 'fixed';
        page1Ref.current.style.top = `${0}px`;
        // setPage1Top(scrollTop);
      } else {
        page1Ref.current.style.position = 'absolute';
        page1Ref.current.style.top = `${clientHeight * 3}px`;
      }
      /**
       * @第一屏的动画相关
       * */
      /**
       * @动画1  item item2 从下往上运动 top 100 - 0
       * */
      const a2Ing = scrollTop <= clientHeight;
      if (a2Ing) {
        console.log(clientHeight, scrollTop);
        // 执行动画1
        setStyleByDom('.page1 .item2', {
          top: `${Math.ceil(clientHeight - scrollTop)}px`,
        });
        // // 重置动画2
        setStyleByDom('.page1 .item2 .background-img', {
          transform: `scale(2)`,
        });
        // // 动画3重置
        setStyleByDom('.page1 .item3', {
          width: `0%`,
        });
      } else {
        // 动画1 执行结束
        setStyleByDom('.page1 .item2', {
          top: `0px`,
        });
      }
      /**
       * @动画2 item item2 img 由2缩小到1
       * */
      const a3Ing = scrollTop >= clientHeight && scrollTop <= clientHeight * 2;
      if (a3Ing) {
        setStyleByDom('.page1 .item2 .background-img', {
          transform: `scale(${Math.ceil(clientHeight * 2 - scrollTop) /
            clientHeight +
            1})`,
        });
        // 动画1 执行结束
        setStyleByDom('.page1 .item2', {
          top: `0px`,
        });
        // // 动画3重置
        setStyleByDom('.page1 .item3', {
          width: `0%`,
        });
      } else {
        if (!a2Ing) {
          // 动画2 执行结束
          setStyleByDom('.page1 .item2 .background-img', {
            transform: `scale(1)`,
          });
        }
      }
      /**
       * @动画3 item item3 宽度，从0 到100%；
       * */
      if (scrollTop >= clientHeight * 2 && scrollTop <= clientHeight * 3) {
        const width = Math.ceil(
          ((scrollTop - clientHeight * 2) / clientHeight) * 100,
        );
        setStyleByDom('.page1 .item3', {
          width: `${width}%`,
        });
        // 动画1 执行结束
        setStyleByDom('.page1 .item2', {
          top: `0px`,
        });
        // 动画2 执行结束
        setStyleByDom('.page1 .item2 .background-img', {
          transform: `scale(1)`,
        });
      } else {
        if (!a3Ing && !a2Ing) {
          // 动画3 执行结束
          // document.querySelector('.page1 .item4').style.top = `0px`;
          setStyleByDom('.page1 .item3', {
            width: `100%`,
          });
        }
      }
      /**
       * @第二屏的动画相关
       *
       * */
      /**
       * @固定页面page2
       * */
      if (scrollTop >= clientHeight * 4 && scrollTop <= clientHeight * 5) {
        // console.log(scrollTop,clientHeight*3);
        page2Ref.current.style.position = 'fixed';
        page2Ref.current.style.top = `${0}px`;
        // setPage1Top(scrollTop);
      } else if (scrollTop >= clientHeight * 5) {
        page2Ref.current.style.position = 'absolute';
        page2Ref.current.style.top = `${clientHeight}px`;
      } else if (scrollTop <= clientHeight * 4) {
        page2Ref.current.style.position = 'absolute';
        page2Ref.current.style.top = `${0}px`;
      }
      /**
       * @动画1   显示车框
       * */
      const a21Ing =
        scrollTop >= clientHeight * 3 && scrollTop <= clientHeight * 4;
      if (a21Ing) {
        // 执行动画1  opacity 0~1
        setStyleByDom('.page2 .img1', {
          opacity: `${Math.ceil(
            ((scrollTop - clientHeight * 3) / clientHeight) * 1,
          )}`,
        });
      } else if (scrollTop < clientHeight * 3) {
        // 动画1
        setStyleByDom('.page2 .img1', {
          opacity: 0,
        });
      } else if (scrollTop > clientHeight * 4) {
        // 动画1
        setStyleByDom('.page2 .img1', {
          opacity: 1,
        });
      }
      /**
       * @动画2   显示车背景和文字
       * */
      const a22Ing =
        scrollTop >= clientHeight * 4 && scrollTop <= clientHeight * 5;
      if (a22Ing) {
        // 执行动画1  opacity 0~1
        const percent = ((scrollTop - clientHeight * 4) / clientHeight) * 1;
        setStyleByDoms({
          '.page2 .img2': {
            opacity: `${percent}`,
          },
          '.page2 .text1': {
            opacity: `${percent}`,
          },
        });
        windsRef.current?.setValue(percent);
      } else if (scrollTop < clientHeight * 4) {
        // 动画2
        setStyleByDoms({
          '.page2 .img2': {
            opacity: 0,
          },
          '.page2 .text1': {
            opacity: 0,
          },
        });
        windsRef.current?.setValue(0);
      } else if (scrollTop > clientHeight * 5) {
        // 动画2
        setStyleByDoms({
          '.page2 .img2': {
            opacity: 1,
          },
          '.page2 .text1': {
            opacity: 1,
          },
        });
        windsRef.current?.setValue(1);
      }
    },
    [page1Ref.current, setStyleByDom, clientHeight],
  );

  useEffect(() => {
    window.addEventListener('scroll', onScroll);
    // 获取页面高度
    setClientHeight(document.querySelector('.getPageHeight').offsetHeight);
    return () => window.removeEventListener('scroll', onScroll);
  }, [onScroll]);

  return (
    <div className="container">
      <div className="page1">
        <div ref={page1Ref} className="content">
          <div className="item item1">
            <img
              className="background-img"
              src={heroBackgroundDesktopJpg}
              alt=""
            />
          </div>
          <div className="item item2" style={{ top: '100vh' }}>
            <img
              className="background-img"
              src={heroVehicelRoofDesktopJpg}
              alt=""
            />
          </div>
          <div className="item item3" style={{ width: 0 }}>
            <img
              className="background-img"
              src={heroVehicleSideviewDesktopJpg}
              alt=""
            />
          </div>
        </div>
        <div className="placeholder" />
        {/* 占位*/}
        <div className="placeholder" />
        <div className="placeholder" />
        <div className="placeholder" />
      </div>
      <div className="page2">
        <div ref={page2Ref} className="content">
          <div className="item item1">
            <img className="background-img img1" src={p21Png} alt="" />
            <img className="background-img img2" src={p22Png} alt="" />
            <Winds windeRef={windsRef} percent={0.5} />
            <div className="text1">流动的艺术，恰到好处</div>
          </div>
        </div>
        <div className="placeholder" />
        {/* 占位*/}
        <div className="placeholder" />
      </div>
      <div className="page3">
        <div className="placeholder" />
        {/* 占位*/}
      </div>
      <div className="getPageHeight" />
    </div>
  );
}

export default Index;
